<template>
  <div class="example-showcase">
    <sweet-dropdown>
      <span class="el-dropdown-link">
        Dropdown List
        <sweet-icon class="el-icon--right">
          <arrow-down />
        </sweet-icon>
      </span>
      <template #dropdown>
        <sweet-dropdown-menu>
          <sweet-dropdown-item>Action 1</sweet-dropdown-item>
          <sweet-dropdown-item>Action 2</sweet-dropdown-item>
          <sweet-dropdown-item>Action 3</sweet-dropdown-item>
          <sweet-dropdown-item disabled>Action 4</sweet-dropdown-item>
          <sweet-dropdown-item divided>Action 5</sweet-dropdown-item>
        </sweet-dropdown-menu>
      </template>
    </sweet-dropdown>
  </div>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue';
</script>
<style scoped>
.example-showcase .el-dropdown-link {
  color: #366bfc;
  display: flex;
  align-items: center;
}
</style>
